<template>

    <div class="order-cancel">

        <button @click="doCancelOrder()">Cancel order</button>
        <!-- 取消对话框 -->
        <UxDialog :visible="!!cancel_dialog" @close="cancel_dialog = null">
            <div class="cancel-dialog" v-loading="cancel_loading">
                <figure><img src="https://img.podpartner.com/static/images-20230202/order-cancel.png" alt=""></figure>
                <p>
                    <strong>Are you sure you want to cancel this order?</strong>
                </p>
                <fieldset>
                    <!-- <button type="primary" @click="cancel_dialog = null">Cancel</button> -->
                    <button type="primary" @click="cancel_dialog()">Confirm</button>
                </fieldset>
            </div>
        </UxDialog>
    </div>

</template>
<script>
export default {
    props: ["info"],
    data () {
        return {

            cancel_dialog: null,
            cancel_loading: false,

        };
    },
    methods: {

        //取消订单
        doCancelOrder () {
            this.cancel_dialog = async () => {
                this.cancel_loading = true;
                let res = await this.$http(
                    "Order.putCancelOrder/" + this.info.order_code
                );
                if (res.code == 0) {
                    this.$emit("update");
                    this.cancel_dialog = null;
                    this.$uxMessage.success('Order cancelled');
                } else {
                    this.$uxMessage.warning('Failed to cancel order');
                    this.cancel_loading = false;
                }

            }
        },


    },
    created () { },
};
</script>
<style lang="scss" scoped>
.order-cancel {
    button {
        height: 32px;
        padding-left: 10px;
        padding-right: 10px;
        white-space: nowrap;
        background-color: #fff;
    }
}

.cancel-dialog {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 40px 20px 26px;
    width: 320px;
    height: 412px;

    figure {
        margin-top: 40px;
        width: 80px;
        height: 80px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    p {
        height: 120px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        color: #000000;
        line-height: 20px;
        text-align: center;
        strong {
            color: #000000;
            margin-bottom: 8px;
        }
        span {
            color: #555555;
            line-height: 22px;
        }
    }

    fieldset {
        display: flex;
        flex-direction: column;
        width: 100%;
        button + button {
            margin-top: 8px;
        }
    }
}
</style>
